<template>
  <div>
    <a-modal
      :destroyOnClose="true"
      :maskClosable="false"
      :keyboard="false"
      :visible="visible"
      :title='title'
      :confirm-loading="confirmLoading"
      width="650px"
      :dialog-style="{}"
      @cancel="close"
      @ok="handleOk"
    >

      <sidebar-menu
        ref="menuMainTreed"
        :checkable="true"
        @on-check="roleMainTreeCheck"
        @on-select="roleMainTreeSelect"
        :heightTree="'height:400px'"
        :checked-keys.sync="menuKeys"
        :checkedKey="checkedKey"
         :type="2"
      />

    </a-modal>
  </div>
</template>

<script>
  import sidebarMenu from "@/components/accessControlSystem/sidebarMenu.vue";

  export default {
    props: {
      title: {
        type: String,
        default: "设置"
      },
      checkedKey: {
        type: Array,
        default: ()=>[]
      },
    },
    components:{
      sidebarMenu
    },
    data() {
      return {
        visible: false,
        confirmLoading: false,
        menuKeys:[],
      }
    },
    watch:{

    },
    computed:{

    },
    beforeMount(){

    },
    mounted(){

    },
    methods: {
      close(){
        this.confirmLoading = false;
        this.visible = false
      },
      open(){
        this.visible = true
      },

        // 重置树
      setMenuTree(tree,areaIds) {
        this.$refs.menuMainTreed.setMenuTree(tree,areaIds);
      },
      handleOk(){
        // console.log(this.menuKeys)
        // if (this.menuKeys.length == 0){
        //   this.$message.warning("请选择区域");
        //   return false
        // }
        this.confirmLoading = true;
        this.$emit('okSave',this.menuKeys);
      },
      roleMainTreeSelect(v){
        // console.log(v);
        this.$emit('on-select',v);
        this.menuKeys = v;
      },
      roleMainTreeCheck(v){
        // console.log(v);
        this.$emit('on-check',v);
        this.menuKeys = v;
      },



    }

  }
</script>

<style scoped>

</style>
